<template>
    <div class="home-container">
        <!-- 欢迎区域 -->
        <section class="welcome-section">
            <h1 class="title">欢迎来到 ThinkOJ</h1>
            <p class="subtitle">激发你的编程潜能，提升解题能力</p>
            <el-button type="primary" size="large" @click="router.push({ name: 'Problems' })">
                开始刷题
            </el-button>
        </section>

        <!-- 功能特点展示 -->
        <section class="features">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-card class="feature-card">
                        <template #header>
                            <div class="feature-header">
                                <el-icon class="feature-icon">
                                    <Trophy />
                                </el-icon>
                                <h3>在线比赛</h3>
                            </div>
                        </template>
                        <p>参加各类编程比赛，与同学切磋技能，提升实战能力</p>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="feature-card">
                        <template #header>
                            <div class="feature-header">
                                <el-icon class="feature-icon">
                                    <Collection />
                                </el-icon>
                                <h3>题库资源</h3>
                            </div>
                        </template>
                        <p>丰富的题目资源，从入门到进阶，助你循序渐进</p>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card class="feature-card">
                        <template #header>
                            <div class="feature-header">
                                <el-icon class="feature-icon">
                                    <ChatDotRound />
                                </el-icon>
                                <h3>交流讨论</h3>
                            </div>
                        </template>
                        <p>与其他学习者分享经验，讨论解题思路，共同进步</p>
                    </el-card>
                </el-col>
            </el-row>
        </section>

        <!-- 最新比赛 -->
        <section class="recent-contests">
            <h2 class="section-title">最新比赛</h2>
            <el-table :data="recentContests" style="width: 100%">
                <el-table-column prop="title" label="比赛名称" />
                <el-table-column prop="startTime" label="开始时间" width="180" />
                <el-table-column prop="duration" label="持续时间" width="120" />
                <el-table-column prop="participants" label="参与人数" width="120" />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleJoinContest(scope.row)">
                            报名参加
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Trophy, Collection, ChatDotRound } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 模拟最新比赛数据
const recentContests = ref([
    {
        title: '新手入门赛',
        startTime: '2024-04-10 14:00',
        duration: '2小时',
        participants: 128
    },
    {
        title: '每周练习赛',
        startTime: '2024-04-12 19:00',
        duration: '3小时',
        participants: 256
    },
    {
        title: '算法进阶赛',
        startTime: '2024-04-15 15:00',
        duration: '4小时',
        participants: 192
    }
])

// 处理参加比赛
const handleJoinContest = (contest: any) => {
    // TODO: 实现比赛报名逻辑
    console.log('参加比赛:', contest.title)
}
</script>

<style scoped>
/* 首页容器 */
.home-container {
    padding: 20px;
}

/* 欢迎区域样式 */
.welcome-section {
    text-align: center;
    padding: 60px 0;
    background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 40px;
}

.title {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.subtitle {
    font-size: 1.2rem;
    margin-bottom: 24px;
    opacity: 0.9;
}

/* 功能特点卡片样式 */
.features {
    margin-bottom: 40px;
}

.feature-card {
    height: 100%;
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-icon {
    font-size: 24px;
    color: #409EFF;
}

/* 最新比赛区域样式 */
.section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #1a237e;
}

.recent-contests {
    margin-top: 40px;
}
</style>